{% load bt_tags %}
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="HandheldFriendly" content="True">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="{{ STATIC_URL }}mobile/css/tp/base.css?v=131231">
    {% if user_agent == 1 %}
    <script type="text/javascript" src="{{ STATIC_URL }}vacation/js/JS2ObjCBridge.js"></script>
    {% endif %}
    <script>
    // 面包旅行的 android方法有问题 

    // System
    var breadtrip_banner_title = '购买类型';
    var activity_name = '购买类型';

    // Display share button or not
    var shr_flag = 0;
    // For Android
    if ( typeof(android) != "undefined" ) {
        android.setTitle(breadtrip_banner_title);
    }
    </script>
    <style type="text/css">
        .price {
            color: #f86c41;
            border: 1px solid #f86c41;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            margin-left: 10px;
            padding: 3px 5px;
            margin-top: -5px;
        }
        .type-btn {
            color: #4abdcc;
            font-size: 14px;
            padding: 5px 0px;
        }
        #type-table {
            border-top: 1px solid #999999;
            border-spacing: initial;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            background-color: #fbf7ed;
        }
        tr {
            height: 80px;
        }
        #type-table td {
            border-bottom: 1px solid #999999;
            background-color: #fbf7ed;
            cursor: pointer;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            padding: 5px 2px;
        }
        td a {
            text-decoration: none;
            width: 100%;
            height: 100%;
        }
        p.label {
            font-size: 20px;
            font-family: inherit;
            font-weight: 300;
            color: #5c5c5c;
            max-width: 68%;
            margin-top: 10px;
            float: left;
        }
        td p {
            margin: 5px 0px;
            margin-top: -8px;
            font-size: 13px;
            color: #999;
            line-height: 24px;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
            clear:both;
        }
        header {
            padding: 10px;
        }
        nav {
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            text-align: center;
            border: 1px solid #4abdcc;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            width: 200px;
        }
        nav a {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            display: inline-block;
            text-decoration: none;
            width: 49%;
            font-size: 14px;
            -webkit-tap-highlight-color: rgba(0,0,0,0)
        }
        nav a.cur {
            background: #4abdcc;
            color: #fff;
            -web-transition: background .2s linear, color .2s;
            transition: background .2s linear, color .2s;
        }
        .children_types {
            display: none;
        }
        .icon {
            background-image: url(/static/img/vacation_pay_icon.png);
            display: inline-block;
            background-repeat: no-repeat;
            background-size: 118px 1000px;
        }
        .icon-selected {
            background-position: 0 -691px;
            height: 35px;
            width: 20px;
            float: right;
            margin-right: 0px;
            margin-top: 7px;
        }
        .selected {
            float: right;
        }
    </style>
    <title>购买类型</title>
</head>
<body data-user-agent="{{ user_agent }}" data-csrf="{{ csrf_token }}" data-version="{{ app_version }}">
    {% if adult_type %}
    <header>
        <nav id="nav">
            <a class="cur type-btn" href="###" name="adult">成人</a>
            <a class="type-btn" href="###" name="children">儿童</a>
        </nav>
    </header>
    {% endif %}
    <section class="booking-form">
        <form action="" method="post" enctype="multipart/form-data">
        <table id="type-table">
            <tbody>
                {% for type in adult_types %}
                <tr class="adult_types">
                    {% if type.is_null %}
                    <td class="type-select" href="/product/{{ type.product.pk }}/order/?&device_id={{ device_id }}&travel_date={{ travel_date }}&type_id={{ type.pk }}&position={{ position }}&plan_id={{ plan_id }}&category=0&order_id={{ order_id }}">
                    {% else %}
                        {% if type.is_adult %}
                        <td class="type-select" href="/product/{{ type.product.pk }}/order/?&device_id={{ device_id }}&travel_date={{ travel_date }}&type_id={{ type.pk }}&position={{ position }}&plan_id={{ plan_id }}&category=1&order_id={{ order_id }}">
                        {% else %}
                        <td class="type-select" href="/product/{{ type.product.pk }}/order/?&device_id={{ device_id }}&travel_date={{ travel_date }}&type_id={{ type.pk }}&position={{ position }}&plan_id={{ plan_id }}&category=2&order_id={{ order_id }}">
                        {% endif %}
                    {% endif %}
                        <div style="width: 90%; float: left;">
                        <p class="label">{{ type.name }}</p>
                        {% if type.is_adult %}
                        <span class="price">￥{{ type.adult_fee|to_int }}</span>
                        {% else %}
                            {% if type.is_child %}
                            <span class="price">￥{{ type.child_fee|to_int }}</span>
                            {% else %}
                            <span class="price">￥{{ type.null_fee|to_int }}</span>
                            {% endif %}
                        {% endif %}
                        <br />
                        {% if type.description %}
                        <p>{{ type.description }}</p>
                        {% else %}
                        <p></p>
                        {% endif%}
                        </div>
                        <div class="selected">
                            {% if type.pk == change_id %}
                            {% if type.is_null and category == 0 %}
                            <i class="icon icon-selected"></i>
                            {% else %}
                                {% if type.is_adult and category == 1 %}
                                <i class="icon icon-selected"></i>
                                {% endif %}
                                {% if type.is_child and category == 2 and not type.is_adult %}
                                <i class="icon icon-selected"></i>
                                {% endif %}
                            {% endif %}
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
                {% for type in children_types %}
                <tr class="children_types">
                    <td class="type-select" href="/product/{{ type.product.pk }}/order/?&device_id={{ device_id }}&travel_date={{ travel_date }}&type_id={{ type.pk }}&position={{ position }}&plan_id={{ plan_id }}&category=2&order_id={{ order_id }}">
                        <div style="width: 90%; float: left;">
                        <p class="label">{{ type.name }}</p>
                        <span class="price">￥{{ type.child_fee|to_int }}</span>
                        {% if type.child_description %}
                        <br />
                        <p>{{ type.child_description }}</p>
                        {% else %}
                        <p></p>
                        {% endif%}
                        </div>
                        <div class="selected">
                            {% if type.pk == change_id and category == 2 %}
                            <i class="icon icon-selected"></i>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </form>
    <section>
    <script src="{{ STATIC_URL }}mobile/js/zepto.min.js"></script>
    <script src="{{ STATIC_URL }}mobile/js/sns.js?v=20131206"></script>
    <script type="text/javascript">
        if ( typeof(android) != "undefined" ) {
            android.setTitle('选择类型');
            {% if not is_breadtrip %}
            android.goBackApp(false);
            android.goBackURL("/product/{{ product.pk }}/order/?&device_id={{ device_id }}&travel_date={{ travel_date }}&type_id={{ type.pk }}&position={{ position }}&plan_id={{ plan_id }}&category={{ category }}&order_id={{ order_id }}");
            android.showContactUs(false);
            {% endif %}
        }
        {% if user_agent == 1 %}
        JS2ObjCBridge.call("setTitle", ['选择类型']);
        JS2ObjCBridge.call("goBackApp", [false]);
        JS2ObjCBridge.call("goBackURL", ["/product/{{ product.pk }}/order/?&device_id={{ device_id }}&travel_date={{ travel_date }}&type_id={{ type.pk }}&position={{ position }}&plan_id={{ plan_id }}&category={{ category }}&order_id={{ order_id }}"]);
        {% endif %}

        $(".type-btn").click(function(){
            var name = $(this).attr("name");
            if (name=='adult') {
                $(".adult_types").show();
                $(".children_types").hide();
                $(".type-btn[name='adult']").addClass("cur");
                $(".type-btn[name='children']").removeClass("cur");
            } else {
                $(".adult_types").hide();
                $(".children_types").show();
                $(".type-btn[name='adult']").removeClass("cur");
                $(".type-btn[name='children']").addClass("cur");
            };
        });

        $("td.type-select").click(function(){
            var url = $(this).attr("href");
            window.location.href=url;
        });
        {% if category == 2 %}
        $(".type-btn").click();
        {% endif %}
    </script>
</body>
</html>


